<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>基本资料</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-calendar__body{
            padding: 0 20px 0;
        }
        .el-calendar-table .el-calendar-day{
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-row :gutter="20">
            <el-col :span="8" :xs="24">
                <el-card style="background: #fff;">
                    <div style="display: flex;flex-direction: column; align-items: center;">
                        <div style="width:170px;height:170px;border:1px solid #EBEEF5;flex-shrink:0;display: flex;justify-content: center; align-items: center; margin-bottom: 20px;">
                            <el-image style="width:150px;height:150px;border-radius: 50%;" :preview-src-list="[User.Image?User.Image:defaultImage]" :src="User.Image?User.Image:defaultImage"></el-image>
                        </div>
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <div>
                                <span style="font-size: 20px; font-weight: 700;">{{User.Name}}</span>
                                <el-divider direction="vertical"></el-divider>
                                <span style="font-size: 14px;">{{User.User_Number}} ({{User.ID_Name}})</span>
                            </div>
                            <el-divider></el-divider>
                            <span style="font-size: 12px; color: #828d96;">上次登录时间:{{getYMDHMSDate(User.Operation_Datetime)}}</span>   
                        </div>
                    </div>
                </el-card>
                <el-card style="background: #fff; margin-top: 20px;">
                    <el-calendar v-model="value"></el-calendar>
                </el-card>
            </el-col>
            <el-col :span="16" :xs="24">
                <el-card style="background: #fff;">
                    <el-table :data="tableData" stripe border height="calc(100vh - 140px)" style="width: 100%">
                        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                        <el-table-column align="center" prop="Role_SerialNumber" label="登录时间记录">
                            <template v-slot="{row}">
                                {{getDate(row.Operation_Datetime)}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="IP" label="登录IP"></el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[15, 30, 50]"
                        :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>